<template>
	<view class="container">
		<!-- 标题 -->
		<view v-if="phoneBool" class="title">手机号注册</view>
		<view v-else class="title flex flex-column">
			<text>HELLO～</text>
			<text>欢迎登录</text>
		</view>

		<!-- 注册表单 -->
		<u-form :model="form" ref="form" :rules="rules">
			<view v-if="phoneBool">
				<!-- 手机号输入 -->
				<u-form-item prop="phone">
					<view class="flex flex-column" style="width: 100%">
						手机号
						<view class="flex align-center phone-btn">
							<text class="country-code">+86</text>
							<u-icon name="arrow-down-fill" size="19"></u-icon>
							<u-input style="margin: 0 20rpx" v-model="form.phone" type="number" placeholder="请输入手机号码" :clearable="clearable"></u-input>
						</view>
					</view>
				</u-form-item>

				<!-- 验证码输入 -->
				<u-form-item prop="code">
					<view class="flex flex-between" style="width: 100%">
						<view>
							<u-input v-model="form.code" type="number" placeholder="请输入验证码" :border="border" :clearable="clearable"></u-input>
						</view>
						<view>
							<u-button size="mini" type="primary" :disabled="countdown > 0" @click="sendCode">
								{{ countdown > 0 ? countdown + 's' : '获取验证码' }}
							</u-button>
						</view>
					</view>
				</u-form-item>

				<!-- 密码输入 -->
				<u-form-item prop="password">
					<u-input v-model="form.password" type="password" placeholder="请设置你的密码" :border="border" :clearable="clearable" />
				</u-form-item>

				<!-- 邀请码 -->
				<view class="invitation-code">
					<text>邀请码：</text>
					<input v-model="code" class="code-text" />
				</view>

				<!-- 密码登录链接 -->
				<view class="link-area flex flex-between">
					<text></text>
					<text @click="goToPasswordLogin">已有账号</text>
				</view>
			</view>

			<view v-else>
				<view class="btn">
					<u-field label-width="80" v-model="form.phone" placeholder="请输入账号/手机号码">
						<template slot="icon">
							<view class="flex align-center flex-center" style="width: 100%"><u-icon name="account" size="30"></u-icon></view>
						</template>
					</u-field>
				</view>
				<view class="btn">
					<u-field label-width="80" :password="!eyeBool" v-model="form.password" placeholder="请输入密码">
						<template slot="icon">
							<view class="flex align-center flex-center" style="width: 100%" @click="eyeBool = !eyeBool">
								<u-icon v-if="eyeBool" name="eye-fill" size="30"></u-icon>
								<u-icon v-else name="eye-off" size="30"></u-icon>
							</view>
						</template>
					</u-field>
				</view>
				<!-- 手机号登录链接 -->
				<view class="link-area flex flex-between">
					<text></text>
					<text style="color: #000" @click="goToPasswordLogin">去注册</text>
				</view>
			</view>

			<view class="flex flex-column flex-center align-center">
				<!-- 登录按钮 -->
				<u-button class="login-btn" :hair-line="false" :disabled="!formValid || isLoading" @click="submitForm">
					<!-- 加载状态内容 -->
					<template v-if="isLoading">
						<u-loading size="36"></u-loading>
						<span class="loading-text">登录中...</span>
					</template>

					<!-- 默认状态内容 -->
					<span v-else>{{ phoneBool ? '注册' : '登录' }}</span>
				</u-button>

				<view class="mt20">
					<u-checkbox v-model="isAgree" shape="circle">
						<view class="sm row">
							已阅读并同意
							<navigator class="primary" hover-class="none" url="/bundle/pages/server_explan/server_explan?type=0">《服务协议》</navigator>
							和
							<navigator class="primary" hover-class="none" url="/bundle/pages/server_explan/server_explan?type=1">《隐私协议》</navigator>
						</view>
					</u-checkbox>
				</view>
			</view>
			<!-- 用户协议 -->
			<u-modal :value="showModel" show-cancel-button :show-title="false" @confirm="(isAgree = true), (showModel = false)" @cancel="showModel = false" confirm-color="#FF2C3C">
				<view class="comfirm-box">
					<view>请先阅读并同意</view>
					<view class="flex row-center">
						<navigator class="primary" hover-class="none" url="/bundle/pages/server_explan/server_explan?type=0">
							<view class="agreement">《服务协议》</view>
						</navigator>
						和
						<navigator class="primary" hover-class="none" url="/bundle/pages/server_explan/server_explan?type=1">
							<view class="agreement">《隐私协议》</view>
						</navigator>
					</view>
				</view>
			</u-modal>
		</u-form>

		<u-popup v-model="show" mode="center" border-radius="25">
			<view class="show-body flex flex-column align-center flex-center">
				<image src="/static/user/image 38.png" mode="aspectFill" style="width: 480rpx; height: 480rpx"></image>
				<text>资料已提交审核，请耐心等待</text>
				<button @click="show = false">确定</button>
			</view>
		</u-popup>

		<u-popup v-model="showCode" mode="center" border-radius="25">
			<view class="code-body flex flex-column align-center flex-between">
				<u-icon name="error-circle" size="56" color="#f05a39"></u-icon>
				<text>该邀请码不存在哦！</text>
				<button @click="showCode = false">确定</button>
			</view>
		</u-popup>

		<!-- #ifdef H5 -->
		<view class="code-body-H5" v-if="!phoneBool">
			<button @click="h5TapDownload()">APP下载</button>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
import user from '@/api/user.js';
import { phoneValidate } from '@/utils/validate.js';
export default {
	data() {
		return {
			isLoading: false, // 加载状态标识
			showCode: false,
			show: false,
			eyeBool: false,
			phoneBool: false, //手机号登录
			isAgree: false,
			showModel: false,
			form: {
				phone: '',
				code: '',
				password: ''
			},
			rules: {
				phone: [
					{
						required: true,
						message: '请输入手机号码',
						trigger: ['blur', 'change']
					}
				],
				code: [
					{
						required: true,
						message: '请输入验证码',
						trigger: ['blur', 'change']
					}
				],
				password: [
					{
						required: true,
						message: '请设置密码',
						trigger: ['blur', 'change']
					}
				]
			},
			countdown: 0,
			border: true,
			clearable: true,
			code: ''
		};
	},
	computed: {
		formValid() {
			if (this.phoneBool) {
				return this.form.phone && this.form.code && this.form.password;
			} else {
				return this.form.phone && this.form.password;
			}
		}
	},
	onLoad(o) {
		if (o.code) {
			this.phoneBool = true;
			this.code = o.code;
		}
	},
	methods: {
		h5TapDownload() {
			uni.navigateTo({
				url: '/pages/download/download'
			});
		},
		sendCode() {
			// 验证手机号
			if (!this.form.phone || !phoneValidate(this.form.phone)) {
				this.$u.toast('请输入正确的手机号');
				return;
			}

			// 开始倒计时
			this.countdown = 60;
			const timer = setInterval(() => {
				if (this.countdown <= 1) {
					clearInterval(timer);
					this.countdown = 0;
				} else {
					this.countdown--;
				}
			}, 1000);

			user.getCode({ phonenumber: this.form.phone }).then((res) => {
				// 发送验证码请求
				this.$u.toast('验证码已发送');
			});
		},
		goToPasswordLogin() {
			this.phoneBool = !this.phoneBool;
		},
		async submitForm() {
			try {
				if (this.phoneBool) {
					await this.$refs.form.validate();
				}

				if (!this.isAgree) {
					this.showModel = true;
					return;
				}

				this.isLoading = true;

				if (this.phoneBool) {
					await this.handleRegister();
				} else {
					await this.handleLogin();
				}
			} catch (error) {
				if (error.message !== '需同意协议') {
					uni.showToast({
						title: error.message || '操作失败',
						icon: 'none'
					});
				}
			} finally {
				this.isLoading = false;
			}
		},
		handleRegister() {
			let _this = this;
			user.addRegister({
				phonenumber: _this.form.phone,
				password: _this.form.password,
				verificationCode: _this.form.code,
				invitationCode: this.code //邀请码
			})
				.then((res) => {
					uni.showToast({ title: '注册成功' });
					_this.resetForm();
					_this.goToPasswordLogin();
				})
				.catch((erro) => {
					console.log(erro);
				});
		},
		handleLogin() {
			let _this = this;
			user.getLogin({
				username: _this.form.phone,
				password: _this.form.password
			})
				.then((res) => {
					uni.setStorageSync('token', res.token);
					uni.showToast({ title: '登录成功' });
					this.getInfo();
					uni.reLaunch({
						url: '/pages/index/index?isNotice=' + true
					});
				})
				.catch((erro) => {
					console.log(erro);
				});
		},
		resetForm() {
			this.$refs.form.resetFields();
			this.form.password = '';
			this.eyeBool = false;
		},
		getInfo() {
			user.getInfo()
				.then((res) => {
					const user = res.data;
					uni.setStorageSync('user', user);
					uni.setStorageSync(user.userId + '', 0);
					if (!user.fullName && !user.idCardNumber) {
						uni.showToast({
							title: '个人信息不完整，请完善个人信息',
							icon: 'none',
							duration: 2500 // 适当延长显示时间
						});
						setTimeout(() => {
							uni.navigateTo({
								url: '/bundle/pages/user_set/user_set'
							});
						}, 2500);
						return;
					}
				})
				.catch((erro) => {
					console.log(erro);
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.code-body-H5 {
	width: 100%;
	display: flex;
	justify-content: center;
	margin-top: 150rpx;

	button {
		width: 576rpx;
		height: 88rpx;
		border-radius: 80rpx 80rpx 80rpx 80rpx;
		border: 2rpx solid #f05a39;

		font-weight: 500;
		font-size: 32rpx;
		color: #f05a39;
	}
}
.text-form {
	color: red;
	font-size: 26rpx;
	position: absolute;
	line-height: 40rpx;
	bottom: -45rpx;
	left: 100rpx;
}
.login-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	position: relative;
}

.loading-text {
	color: #666;
	font-size: 14px;
}

/* 自定义旋转动画 */
@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.code-body {
	width: 416rpx;
	height: 286rpx;
	background: #ffffff;
	border-radius: 40rpx 40rpx 40rpx 40rpx;
	padding: 50rpx;

	text {
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
	}

	button {
		width: 156rpx;
		height: 56rpx;
		background: #fff1ee;
		border-radius: 48rpx 48rpx 48rpx 48rpx;

		font-weight: 500;
		font-size: 28rpx;
		color: #f05a39;
		line-height: 56rpx;
	}
}
.show-body {
	width: 540rpx;
	height: 464rpx;
	background: #ffffff;
	border-radius: 60rpx 60rpx 60rpx 60rpx;
	padding: 30rpx;
	position: relative;

	text {
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
		position: absolute;
		bottom: 120rpx;
	}

	button {
		width: 156rpx;
		height: 56rpx;
		background: #fff1ee;
		border-radius: 48rpx 48rpx 48rpx 48rpx;

		font-weight: 500;
		font-size: 28rpx;
		color: #f05a39;
		line-height: 56rpx;
	}
}
.phone-btn {
	background-color: #fff;
	border-radius: 50rpx;
	border: 2px solid rgb(220, 223, 230);
}
.btn {
	margin-top: 50rpx;
	background-color: #fff;
	border-radius: 50rpx;
}
.flex {
	display: flex;
}
.align-center {
	align-items: center;
}
.flex-center {
	justify-content: center;
}
.flex-evenly {
	justify-content: space-evenly;
}
.flex-between {
	justify-content: space-between;
}
.flex-column {
	flex-direction: column;
}
.comfirm-box {
	text-align: center;
	padding: 60rpx 0 70rpx 0;
}
.agreement {
	color: $-color-primary;
}
.container {
	background: url('@/static/user/Ellipse 1.png') no-repeat;
	background-size: 100% auto;
	padding: 40rpx;
	min-height: 100vh;

	.title {
		font-size: 63rpx;
		color: #333;
		margin: 160rpx 0 60rpx 0;
	}

	.u-form-item {
		margin-bottom: 30rpx;
	}

	.u-input {
		background-color: #fff;
		border-radius: 40rpx;
		padding: 25rpx 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);
	}

	.country-code {
		font-size: 28rpx;
		color: #333;
		margin: 0 10rpx 0 20rpx;
	}

	.link-area {
		font-weight: 500;
		font-size: 20rpx;
		color: #f05a39;
		margin: 20rpx 20rpx 30rpx;
	}

	.invitation-code {
		height: 80rpx;
		background: #ffffff;
		border-radius: 54rpx 54rpx 54rpx 54rpx;

		display: flex;
		justify-content: center;
		align-items: center;

		text {
			font-weight: 500;
			font-size: 28rpx;
			color: #f05a39;
		}
	}

	.code-text {
		margin-left: 10rpx;
	}

	.login-btn {
		margin-top: 70rpx;

		width: 576rpx;
		height: 88rpx;
		background: rgba(251, 192, 171, 0.4);
		border-radius: 80rpx 80rpx 80rpx 80rpx;

		font-weight: 500;
		font-size: 32rpx;
		color: #aaaaaa;
	}
}
</style>
